<template>
    <div id="app" class="page-container" >
        <router-view/>
        <van-tabbar  v-model="active" fixed placeholder>
            <van-tabbar-item  to="/" icon="cart-o">商品列表</van-tabbar-item>
            <van-tabbar-item  to="/submitFly" icon="guide-o">自助积分</van-tabbar-item>
            <van-tabbar-item  to="/user" icon="user-o">我的信息</van-tabbar-item>
            <van-tabbar-item  to="/waiter" icon="chat-o" >联系客服</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {

        computed:{
            active:{
                get(){
                    let index = 0
                    const name = this.$route.name
                    if(name==='GoodList'){
                        index = 0
                    }else if(name==='SubmitFly'){
                        index = 1
                    }else if(name==='User'){
                        index = 2
                    }else{
                        index = 3
                    }
                    return index
                },
                set(){
                    return 0
                }
            }
        },
    };
</script>

<style scoped>
    html, body {
        height: 100%;
    }
    #app {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .page-container {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        background-color: #f7f8fa;
    }
    .placeholder {
        height: 100px;
        background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%), linear-gradient(#f0f0f0 50%, transparent 50%);
        background-size: 20px 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #969799;
        margin-bottom: 12px;
    }
</style>
